<template>
    <view class="page-content">
        <navbar fixed leftIcon="left" :title="detail.nftData.nft_name" shadow></navbar>

        <view class="m-l-20 m-r-20 m-t-15 bg-fff" style="border-radius:19px;overflow: hidden;">
            <view class="bg_678 m-auto h328 rel bg-cover" :style="`width:calc(100vw - 72rpx);background-image:url(${detail.nftData.image});`">
                <view class="view flex-row align-center justify-between width100 p-t-20" style="position:absolute;">
                    <view class="w72 h36 view flex-row align-center justify-center m-l-15" style="border-radius:10px;">
                        <!--background-color:rgba(255, 255, 255,.3);
						<image src="/static/img4/icon-img.png" class="w22 h22 m-r-15"/>
                        <image src="/static/img4/icon-sqar.png" class="w22 h22"/>-->
                    </view>

                    <view style="background: #fff;border-radius: 50%;" class="w36 h36 view align-center justify-center m-r-15">
                        <image src="/static/token/YPT.png" class="w30 h30"/>
                    </view>
                </view>
                
                
            </view>
            <view class="p-b-25 p-t-10 p-l-15 p-r-15">
                <view class="view flex-row align-center justify-between m-t-5">
                    <view class="view flex-row align-center">
                        <!--<image src="/static/img4/icon-spike.png" class="w45 h20 m-r-4"/>-->
                        <view class="fz-12 c_0a1 bold line2">{{ detail.nftData.nft_name }}</view>
                    </view>
                    <view class="c_101 fz-14">YPT价值</view>
                </view>
                
                <view class="view flex-row align-center justify-between m-t-5">
                    <view class="view flex-row align-center">
                        <view class="m-r-5 fz-16 bold c-568">限量{{ detail.nftData.inventory }}份</view>
                        <view class="view flex-row align-center">
                            <!--<image src="/static/img4/fire.png" class="w11 h16 m-r-5"/>
                            <image src="/static/img4/fire.png" class="w11 h16 m-r-5"/>
                            <image src="/static/img4/fire.png" class="w11 h16 "/>-->
                        </view>
                    </view>
                    
                    <view class="c-608 bold">
                        {{ detail.nftData.price }}
                    </view>
                </view>

                <view class="view flex-row align-center justify-between m-t-25">
					<uniNumberBox v-model="numVal" class="inn-number"/>
                    <el-button  class="w184 h42 view align-center justify-center" block style="border-radius: 12px !important;font-size:30rpx;display:flex;" type="primary" @click="confirmOrder">立即购买</el-button>
                </view>
            </view>

        </view>

        <view class="p-l-15 p-r-15 bg-fff m-t-12 p-t-20 p-b-20 p-t-15 m-auto" style="border-radius: 19px;width:calc(100vw - 140rpx);">
			<view class="view flex-row align-center justify-between">
			    <view class="c-9b9 fz-12">贡献值</view>
			    <view class="c-9b9 fz-12">{{ detail.nftData.price }}</view>
			</view>
			<!--<rich-text :nodes="detail.content"></rich-text>-->
        </view>

		<confirmWallet ref="walletComp" token="YPT" :openType="1" :params="params" @confirm="doOrder"/>
    </view>
</template>

<script>
import {mapState, mapGetters} from 'vuex';
import navbar from '@/components/uni-nav-bar'
import uniIcons from '@/components/uni-icons/uni-icons.vue'
import uniEasyinput from '@/components/uni-easyinput/uni-easyinput'
import elButton from '@/components/el-button/el-button'
import uswitch from '@/components/uni-switch/index.vue'
import confirmWallet from '@/components/confirmWallet/index.vue'
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
import { getNftDetailData, buyNFT } from '@/apis/shop'
import { getTokenBalance} from "@/apis/bsc20.js";

export default {
    components: {
      navbar,
      uniEasyinput,
      uniIcons,
      uswitch,
      uniNumberBox,
	  confirmWallet
	},
    data() {
        return {
			val: true,
            numVal: 1,
			nft_id: '',
			balance: 0,
			detail: {
				nftData: {}
			},
			params: {
				token: 'YPT'
			},
        }
    },
	computed: {
		...mapState(["defaultWallet"]),
	},
	onLoad(option) {
		const { nft_id } = option
		this.nft_id = nft_id
		this.getGoodDetails()
		this.getBlanace()
	},
    methods: {
		async doOrder() {
			uni.showLoading()
			const res = await buyNFT(this.params)
			//this.$refs.popup.close()
			if (res.code == 0) {
				uni.hideLoading()
				uni.showToast({
					title: res.message,
					duration: 4000,
					icon: 'none'
				});
				this.$refs.walletComp.close()
			}
		},
		confirmOrder() {
			this.$refs.walletComp.onShowDialog()
			this.params = {
				name: this.detail.nftData.nft_name,
				goods_id: this.nft_id,
				number: this.numVal,
				pay_amount: this.numVal * this.detail.nftData.price,
				token: 'YPT',
				balance: this.balance
			}
		},
		
		changeSwitch(val) {
			console.log(val)
		},
		async getGoodDetails() {
			const res = await getNftDetailData({goods_id: this.nft_id})
			this.detail = res.data.detail
		},
		async getBlanace(){
			let balance = await getTokenBalance(this.defaultWallet.address, 'YPT')
			if(balance.data.amount){
				this.balance = balance.data.amount
			}
		},
		toBack(){
			uni.navigateBack();
		}
    }
    
};
</script>

<style lang="scss" scoped>
.bar1-title {
    color:#3C3C3C;
    font-size: 32rpx;
}
.abs {position: absolute;bottom: -20rpx;left: 0;}
page {
    background: #F6F6F6;
}
::v-deep .inn-number {
    .uni-numbox-btns {
                background: #D1D4E8;
                border-radius: 50%;
            .uni-numbox--text {
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: bold;
            }
    }
    .uni-numbox__value {
        background: #fff !important;
        color: #6781FF !important;
        font-weight: bold;
    }
    
}
.left-bar-item {width: 100%;height:68px;display: flex;align-items: center;justify-content: center;}
.left-bar-item .image{
    width:30px;
    height: 30px;
}
.left-bar-item.active {
    background: #F6F6F6;
}
.list-item:nth-child(odd) {margin-right: 30rpx;}
.popupCenter,.popupsCenter,.popupCenters{
		position: fixed;
		top: 34%;
		left:10%;
		right:50%;
		width: 600rpx;
		margin: 0 auto;
		// height: 360rpx;
		border-radius: 20rpx;
		color: #333;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		.center_title{
			width: 100%;
			text-align: center;
			margin: 20rpx auto;
			font-size: 36rpx;
			color: #333333;
			font-weight:700;
		}
		.center_content{
			width: 80%;
			text-align: center;
			margin: 20rpx auto;
			margin-bottom: 34rpx;
			// font-size: 38rpx;
		}
		.center_button{
			width: 98%;
			height: 100rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #ffffff;
			// border-top: #dddddd;
			button{
				background: #ffffff;

				width: 48%;
				font-size: 34rpx;
				// border:#FFFFFF solid 1rpx;
			}
			.btn1{
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				background: #ffffff;
				width: 100%;
				border-top:#ddd solid 1rpx;
				// border-right:#ddd solid 1rpx;
				border-bottom-left-radius: 20rpx;
			}
			.btn2{
				overflow: hidden;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				background: #ffffff;
				width: 100%;
				border-top:#ddd solid 1rpx;
				border-left:#ddd solid 1rpx;
				border-bottom-right-radius: 20rpx;
				color: #634DFF;
			}
		}

	}
	.popupsCenter{
		width: 600rpx;
		// height: 690rpx;
		top: 20%;
		left:10%;
		right:50%;
		.center_title{
			width: 100%;
			text-align: center;
			margin: 0 auto;
			margin-top: 30rpx;
			margin-bottom: 14rpx;
			font-size: 38rpx;
			color: #333333;
		}
		.center_text{
			width: 100%;
			// height: 70%;
			margin: 60rpx auto;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			input{
				width: 80%;
				margin: 0 auto;
				font-size: 30rpx;
				color: #AAAAAA;
				height: 70rpx;
				border-bottom: 2rpx solid #ddd;
				margin-bottom: 30rpx;
			}
			.text-right{
				text-align: right;
				width: 80%;
				font-size: 26rpx;
				color: #5D5FFC;
				margin-top: -24rpx;
			}
		}
		.tips{
			width: 80%;
			color: #848484;
		}
		.input-frame{
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #aaa;
			.input-input{
				flex: 1;
				font-size: 30rpx;
				padding-right: 14rpx;
			}
			.input-btn{
				font-size: 30rpx;
				color: #5D5FFC;
			}
		}
	}
	// .popupCenters{
	// 	// height: 290rpx;
	// }
.fix-bottom {width: 100vw;height: 100px;background: #fff;bottom: 0;left: 0;padding-top:32rpx;position: fixed;}
</style>
